<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="main.css">

    <style>
        form {
            width: 400px;
            margin: auto;
        }
        div.well {
            width: 450px;
            margin: auto;
            margin-top: 200px;
            padding-bottom: 0px;
        }
        #registerBtn {
            margin-right: 15px;
        }
        #registerHeader {
            margin-top: 0px;
            margin-bottom: 20px;
            margin-left: 10px;
        }
        #loginLink {
            line-height: 44px;
            text-decoration: underline;
        }
    </style>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

<body class="container">
<div class="well">
    <h3 id="registerHeader">Dexen Registration</h3>
    <form id="loginForm" action="/register" method="post" class="form-horizontal">
        <div class="form-group">
            <label for="usernameInput" class="col-lg-3 control-label">Username:</label>
            <div class="col-lg-9">
                <input id="usernameInput" name="username" type="text" class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label for="passwordInput" class="col-lg-3 control-label">Password:</label>
            <div class="col-lg-9">
                <input id="passwordInput" name="password" type="password" class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <input id="registerBtn" name="register" type="submit" value="Register" class="pull-right btn btn-primary" />
            <a id="loginLink" href="/login" class="pull-right">Login</a>
        </div>
    </form>
</div>
</body>

</html>